<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload=function(){
            //getElementsByClassName  通过class取得一组元素
            //兼容性差，IE8以下不支持，不建议使用，无法取得元素
            //数据类似为集合。可以称为类数组
            //仅有length和下标
            //document 全局主语。包含页面所有list的样式
            var lists=document.getElementsByClassName('list');
            
            lists[0].style.color="red";
            console.dir(lists);

            //可以指定主语，根据 ID 选择相关的Class
            var color=document.getElementById('color');
            var lists1=color.getElementsByClassName('list');
            console.dir(lists1);
		}
	</script>
</head>
<body>
	<ul>
        <li>1</li>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
	</ul>
	<ul id="color">
        <li>1</li>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li>
        <li class="list">5</li>
	</ul>
</body>
</html>